<template>
  <!-- 关联项目 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="关联项目"
    @ok="handleOk"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    :footer="null"
    centered
  >
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'stationStatus'">
          {{ ENERGY_STATION_STATUS.filter((item) => item.value === record.stationStatus)[0]?.label }}
        </template>
        <template v-if="column.key === 'handle'">
          <a-button type="link">电站详情</a-button>
           
        </template>
      </template>
    </a-table>
    <!-- <a-pagination
      v-model:current="form.current"
      v-model:page-size="form.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getRelatedstations"
      :show-total="total => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination> -->
  </a-modal>
</template>
<script setup>


import { MODEL_PARAMS_STATUS_LIST, ENERGY_STATION_STATUS } from "@/constants/stationConfig";
const $api = inject("$api");
const props = defineProps({
  linkProjectVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  }
});
const visible = ref(props.linkProjectVisible);
const emits = defineEmits(["update:linkProjectVisible"]);
watch(
  () => props.linkProjectVisible,
  (val) => {
    visible.value = val;
    if(val){
      getRelatedstations();
    }
  }
);
const labelCol = { style: { width: "130px" } };
const total = ref();
const tableData = ref([]);
const form = ref({
  current: 1,
  size: 10,
});
const columns = ref([
  {
    title: "项目名称",
    dataIndex: "projectName",
    key: "projectName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "项目容量（MWh）",
    dataIndex: "stationCapacity",
    key: "stationCapacity",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "项目状态",
    dataIndex: "stationStatus",
    key: "stationStatus",
    width: 120,
    resizable: true,
    align: "center",
  },
  // {
  //   title: "操作",
  //   dataIndex: "handle",
  //   key: "handle",
  //   width: 120,
  //   resizable: true,
  //   align: "center",
  //   fixed: "right",
  // },
]);
const cancel = () => {
  emits("update:linkProjectVisible", false);
};
const tableLoading = ref(false);
const getRelatedstations = async () => {
  tableLoading.value = true;
  const res = await $api.getRelatedstations({
    // ...form.value,
    supplierTypeId: props.rowData.id,
  })
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data;
    total.value = res.data.total;
  }
};

</script>

<style lang="less" scoped>
</style>